<template>
    <el-card class="ranking-card">
      <h2>热门榜</h2>
      <el-table :data="rankingData"   style="width: 100%">
        <!-- Rank Column -->
        <el-table-column
          label="排名"
          width="50"
        >
          <template #default="scope">
            <span v-if="scope.$index === 0" class="rank-badge no1">NO.1</span>
            <span v-else class="rank-badge"> {{ scope.$index + 1 }} </span>
          </template>
        </el-table-column>
  
        <!-- Cover Image Column -->
        <el-table-column
          label="封面"
          width="80"
        >
          <template #default="scope">
            <el-image
              style="width: 50px; height: 65px"
              :src="scope.row.coverImageUrl"
              fit="cover"
            ></el-image>
          </template>
        </el-table-column>
  
        <!-- Book Name and Summary Column -->
        <el-table-column
          label="书名"
        >
          <template #default="scope">
            <div class="book-info">
              <span @click="Link_to_book_detail(scope.row.id)" class="book-title">{{ scope.row.title }}</span>
              <p>{{ scope.row.summary }}</p>
            </div>
          </template>
        </el-table-column>
  
        <!-- Likes Column -->
        <el-table-column
          label="点赞"
          width="80"
        >
          <template #default="scope">
            <span class="likes">{{ scope.row.likes.toLocaleString() }}</span>
          </template>
        </el-table-column>
  
        <!-- Views Column -->
        <el-table-column
          label="浏览量"
          width="80"
        >
          <template #default="scope">
            <span class="views">{{ scope.row.views.toLocaleString() }}</span>
          </template>
        </el-table-column>
  
        <!-- Word Count Column -->
        <el-table-column
          label="字数"
          width="80"
        >
          <template #default="scope">
            <span class="word-count">{{formatNumber( scope.row.wordCount) }} 字</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
import { formatNumber } from '@/utils/util';
import router from '@/router';
  
  // Define the structure of a book item
  interface Book {
    id: number;
    title: string;
    type: number;
    authorId: number;
    likes: number;
    favorites: number;
    views: number;
    status: number;
    publishDate: string;
    lastUpdateDate: string;
    wordCount: number;
    rating: number;
    summary: string;
    coverImageUrl: string;
    commentsCount: number;
    price: number;
    latestChapter: number;
    reviewStatus: number;
  }
  
  // The API response structure
  interface ApiResponse {
    data: {
      listData: Book[];
      page: number;
      size: number;
      totalPages: number;
      totalRecords: number;
    };
    code: number;
    msg: string;
  }
  
  // Data to store the fetched books
  const rankingData = ref<Book[]>([]);
  
  // Function to fetch the data
  const fetchRankingData = async () => {
    try {
      const response = await axios.get<ApiResponse>('/api/books/pop'); // Update with correct API endpoint
      if (response.data.code === 200) {
        console.log('Ranking data:', response.data.data.listData);
        rankingData.value = response.data.data.listData;
      }
    } catch (error) {
      console.error('Error fetching ranking data:', error);
    }
  };
  const Link_to_book_detail = (id: number) => {
    router.push('/book_show/'+id);
  }
  // On component mount, fetch data
  onMounted(() => {
    fetchRankingData();
  });
  </script>
  
  <style scoped>
  .ranking-card {
    width: 650px;
    padding: 10px;
    text-align: center;
    position: absolute;
    left: 27%;
  }
  
  h2 {
    margin-bottom: 10px; 
  }
  
  .rank-badge {
    font-weight: bold;
    font-size: 14px; 
    color: #f56c6c;
  }
  
  .rank-badge.no1 {
    font-size: 18px; /* NO.1 的字体稍大 */
    color: red;
  }
  
  .book-info {
    display: flex;
    flex-direction: column;
    
  }
  
  .book-info span {
    font-weight: bold;
    font-size: 14px; /* 减少书名字体 */
  }
  
  .book-info p {
    color: #888;
    font-size: 12px; /* 减小摘要字体 */
    margin-top: 5px; /* 调整摘要上边距 */
  }
  .book-title {
    cursor: pointer;
  }
  .likes,
  .views,
  .word-count {
    font-weight: bold;
    font-size: 14px; /* 使数据更紧凑 */
    color: #f56c6c;
  }
  </style>
  